<script setup>
import { computed } from "vue";
import AnimatedNumber from "@/components/animate/AnimatedNumber.vue";
import { useGasPriceStore } from "@/stores/gasPrice";
import { calculateCompare } from "@/utils/calculateCompare";
import { usePriceRuleStore } from "@/stores/priceRule";

let gasPriceStore = useGasPriceStore();
let priceRuleStore = usePriceRuleStore()
let prices = computed(() => {
  let rule_ids = gasPriceStore.priceDetail?.areas?.map(item => item.rule_id) ?? [];
  // 去重
  let unique_rule_ids = [...new Set(rule_ids)];
  return unique_rule_ids.map(rule_id => ({
    type: priceRuleStore.getPriceRuleNameById(rule_id),
    price: priceRuleStore.getPriceRulePriceById(rule_id),
    color: '#409EFF'
  }));
})
const staticData = computed(() =>
({
  gasUsage: {
    current: gasPriceStore?.priceDetail?.usage ?? 0,
    lastYear: gasPriceStore?.
      lastPriceDetail?.usage ?? 0
  },
  gasCost: {
    current: gasPriceStore?.priceDetail?.price ?? 0,
    lastYear: gasPriceStore?.lastPriceDetail?.price ?? 0,
  },
  prices: prices.value
})
)

const getCompareClass = (value) => value > 0 ? "compare-up" : "compare-down";
const getCompareIcon = (value) => value > 0 ? "fa fa-arrow-up" : "fa fa-arrow-down";

const costStatistics = computed(() => [
  {
    title: "用气单价",
    hasPrices: true,
    icon: "fa fa-dollar",
    colorClass: "text-danger",
  },
  {
    title: "用气量",
    value: staticData.value.gasUsage.current,
    prefix: "",
    unit: "m³",
    icon: "fa fa-tint",
    colorClass: "text-success",
    compare: {
      value: calculateCompare(+staticData.value.gasUsage.current, +staticData.value.gasUsage.lastYear),
      lastYear: staticData.value.gasUsage.lastYear,
    },
  },
  {
    title: "用气费用",
    value: staticData.value.gasCost.current,
    prefix: "¥",
    icon: "fa fa-money",
    colorClass: "text-primary",
    compare: {
      value: calculateCompare(+staticData.value.gasCost.current, +staticData.value.gasCost.lastYear),
      lastYear: staticData.value.gasCost.lastYear,
    },
  }
]);
</script>

<template>
  <el-row :gutter="20" class="statistics">
    <el-col :span="8" v-for="stat in costStatistics" :key="stat.title">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-header">
          <div class="stat-title">{{ stat.title }}</div>
          <div class="stat-icon" :class="stat.colorClass">
            <i :class="stat.icon"></i>
          </div>
        </div>

        <template v-if="!stat.hasPrices">
          <div class="stat-value" :class="stat.colorClass">
            <animated-number :value="stat.value" :prefix="stat.prefix" :suffix="stat.unit" />
          </div>
        </template>

        <template v-if="stat.hasPrices">
          <div class="prices-grid">
            <div v-for="item in staticData.prices" :key="item.type" class="price-item">
              <div class="price-circle" :style="{ backgroundColor: item.color }">
                <el-tooltip :content="item.type" placement="top">
                  <span class="type-text">{{ item.type.slice(0, 2) }}</span>
                </el-tooltip>
              </div>
              <div class="price-value">¥{{ item.price }}/m³</div>
            </div>
          </div>
        </template>

        <div v-if="stat.compare" class="stat-compare">
          <div class="compare-current">
            <span class="compare-label">同比</span>
            <span class="compare-value" :class="getCompareClass(stat.compare.value)">
              <i :class="getCompareIcon(stat.compare.value)"></i>
              {{ stat.compare.value }}%
            </span>
          </div>
          <div class="compare-last">
            去年同期：{{ stat.prefix }}{{ stat.compare.lastYear }}{{ stat.unit }}
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.stat-card {
  display: flex;
  flex-direction: column;
  height: 180px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.stat-title {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.stat-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.1;
  border-radius: inherit;
}

.stat-icon i {
  font-size: 20px;
  color: currentColor;
  position: relative;
}

.stat-value {
  font-size: 24px;
  margin: 10px 0;
  line-height: 1;
}

.prices-grid {
  display: flex;
  overflow-x: auto;
  justify-content: space-around;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.prices-grid::-webkit-scrollbar {
  height: 4px;
}

.prices-grid::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.prices-grid::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 2px;
}

.price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  gap: 6px;
  flex-shrink: 0;
}

.price-circle {
  width: 40px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.3s;
  cursor: pointer;
}

.price-circle:hover {
  transform: scale(1.1);
}

.type-text {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

.type-suffix {
  font-size: 10px;
  opacity: 0.8;
}

.price-value {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.stat-compare {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.compare-current {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.compare-label {
  color: #909399;
}

.compare-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.compare-last {
  font-size: 12px;
  color: #909399;
}

.compare-up {
  color: #f56c6c;
}

.compare-down {
  color: #67c23a;
}

.text-primary {
  color: var(--el-color-primary);
}

.text-success {
  color: var(--el-color-success);
}

.text-danger {
  color: var(--el-color-danger);
}
</style>